var fps = 30;
var HEIGHT = 360;
var WIDTH = 500;

var isA = false;
var AllA = [];  //所有小对象，子弹等
var imgs = {};

// 矩形类
function Rect(x, y, w, h, color) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color;
    this.img = null;
    this.speed = 7;
    this.destX = x;
    this.destY = y;
    this.A = false;
    this.loadImg = function(src){
        if(imgs[src]){
            this.img = imgs[src];
        }else{
            var img = new Image();
            img.onload = ()=>{
                this.img = img;
                imgs[src] = img;
            }
            img.src = src;
        }
    }
    this.move = function() {
        this.destX = this.destX > WIDTH ? WIDTH -10 : this.destX;
        this.destY = this.destY > HEIGHT ? HEIGHT -10 : this.destY;
        if (this.x != this.destX || this.y != this.destY) {
            // 斜边长度
            let C2 = Math.pow(this.destX - this.x, 2) + Math.pow(this.destY - this.y, 2);
            let C = Math.sqrt(C2);
            if (C <= this.speed || !C) {
                this.x = this.destX;
                this.y = this.destY;
                if (this.A){
                    this.A = false;
                }
            } else {
                let bili = 7 / C;
                let _X = bili * (this.destX - this.x);
                let _Y = bili * (this.destY - this.y);
                this.x += _X;
                this.y += _Y;
            }
        }
    }
    return this;
}

// 绘制一个矩形
function drawRect(ctx, rect) {
    if(rect.img != null){
        ctx.drawImage(rect.img,rect.x, rect.y, rect.w, rect.h);
    }else{
        ctx.fillStyle = rect.color;
        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
    }
}

// 绘制allObject数组内的矩形
function flush(canvas, ctx, allObject) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    allObject[0].move();
    for (let i = 0; i < allObject.length; i++) {
        drawRect(ctx, allObject[i]);
    }
    for (let i = 0; i < AllA.length; i++) {
        if(AllA[i].A == false){
            AllA.splice(i, 1);
            i--;
        }else{
            AllA[i].move();
            drawRect(ctx, AllA[i]);
        }
    }
    if(isA){
        document.body.style.cursor = "pointer";
    }else{
        document.body.style.cursor = "default";
    }
}

// 发射子弹
function startA( my, x, y){
    let tmp = new Rect(my.x, my.y, 20,20,"#EEEE00");
    tmp.destX = x;
    tmp.destY = y;
    tmp.A = true;
    tmp.loadImg("imgs/boob.png");
    AllA.push(tmp);
}


window.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width =  WIDTH ;
    canvas.height = HEIGHT;
    canvas.style.backgroundColor = "#33afd5";
    document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");


    var allObject = [];  // 所有大的对象
    var my = new Rect(60, 20, 50, 50, 'red');
    my.loadImg("imgs/bb.png");
    allObject.push(my);
    allObject.push(new Rect(100, 200, 50, 50, 'blue'));
    allObject.push(new Rect(300, 200, 50, 50, 'blue'));



    setInterval(function() {
        flush(canvas, ctx, allObject);
    }, fps);

    document.onmousedown = function(event) {
        if (event.button == 2) {  // 右键
            isA = false;
            my.destX = event.offsetX - 20;
            my.destY = event.offsetY -20  ;
            return false;
        }else if (event.button == 0){  // 左键
            if (isA){
                startA(my, event.offsetX, event.offsetY);
                isA = false;
            }
            return false;
        }
    }
    document.oncontextmenu = function(event) {
        return false;
    } 
    document.onkeydown = function(event) {  
        if ( event.code === "KeyA" ||  event.code ==="Keya"  ){ 
            isA = true;
        }
    }
}